@import '~styles/vars';

.snap-map {
  .inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    .content {
      height: 100vh;

      .self-marker {
        background-image: url(#{$base-image-path}/bitmoji-self-full.png);
        background-size: cover;
        width: 65px;
        height: 65px;
        transition: all 80ms ease-in;

        &.zoomed-in {
          width: 100px;
          height: 100px;
        }
      }

      .marker {
        background: url(#{$base-image-path}/heat-map.png) no-repeat -10px;
        background-size: 120px;
        width: 70px;
        height: 70px;
        border-radius: 100%;
        cursor: pointer;
        z-index: 1;

        &.active {
          animation: shadow-pulse 0.5s infinite;
        }
      }

      .mapboxgl-popup {
        color: $color-black;
        max-width: 200px;
        padding-bottom: 40px;

        .mapboxgl-popup-content {
          box-shadow: 0 0 8px $color-grey-shade-3;
          border-radius: 6px;
          text-align: center;

          .mapboxgl-popup-close-button {
            display: none;
          }
        }

        header {
          font-size: 16px;
        }

        p {
          margin: 0;
          color: $color-grey-shade-1;
        }
      }
    }
  }
}

@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba($color-black, 0.2);
  }
  100% {
    box-shadow: 0 0 0 35px rgba($color-black, 0);
  }
}
